<template>
  <div>
    <div class="slogan">
      <p style="margin-left: 20px;">答题过程中请勿刷新页面,考试结束时间以实际时间为准,你是懂作弊的</p>
    </div>
    <el-container class="app-item-contain">
      <el-header class="align-center">
        <h1 style="font-size: 30px;">{{ form.paper.name }}</h1>
        <br>
        <span style="float: left; margin-top: -50px; ">
          <el-tag type="success" size="normal" style="font-weight: bold">开始时间: {{ form.begin_time }}</el-tag>
        </span>
        <span style="float: left; margin-top: -10px;" v-if="form.task_type === 0">
          <el-tag type="danger" size="normal" style="font-weight: bold">结束时间: {{ form.deadline }}</el-tag>
        </span>
        试卷总分: <span style="color: red;" class="sec-title">{{ form.paper.paper_score }}</span>
        <span class="sec-title">所属学科: {{ form.paper.subject_name }}</span>
        <span class="sec-title">考试时长: {{ form.task_duration }}min</span>
        <span class="sec-title">考试类型: {{ form.type_name }}</span>
        <span style="float: right; font-size: 20px;">
          考生姓名: &nbsp;&nbsp;<span style="color:darkblue">{{ form.student_name }}</span>
        </span>
        <el-divider></el-divider>
      </el-header>
      <br>
      <br>
      <el-main>
        <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px">
          <el-row :key="index" v-for="(topic,index) in form.paper.topicItem">
            <h3>{{ topic.content }}</h3>
            <el-card class="exampaper-item-box" v-if="topic.titles.length!==0">
              <el-form-item :key="title.id" :label="index + 1 + '.'"
                            v-for="(title, index) in topic.titles"
                            class="exam-question-item" label-width="50px" :id="'question-'+ index">
                <StudentExamTitle :qType="title.title_type" :question="title"/>
              </el-form-item>
            </el-card>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
    <div class="back-btn">
      <el-button icon="el-icon-s-promotion" type="danger" style="font-size: 16px;" @click="open">提交试卷
      </el-button>
    </div>
    <div class="watch-block" v-if="form.task_type===0">
      <p style="margin-top: 18px;">{{ format_time }}</p>
    </div>
    <div style="text-align: center; padding-bottom: 10px;">&COPY;copyleft@海饼干</div>
  </div>
</template>

<script>
import StudentExamTitle from "../../components/StudentExamTitle";

export default {
  name: 'StudentExam',
  components: {StudentExamTitle,},
  data() {
    return {
      form: {
        paper: {
          name: '',
          paper_score: '',
        }
      },
      formLoading: false,
      timer: null,
      duration: 0,
      format_min: 0,
      format_time: '',
      format_sec: '00',
    }
  },
  created() {
    let id = this.$route.query.id
    if (id && parseInt(id) !== 0) {
      this.formLoading = true
      this.$http({
        url: this.$settings.BASE_URL + `/paper/student_paper/get_paper/`,
        params: {paper_id: id},
        method: 'get',
      }).then(res => {
        this.form = res.data.result
        this.duration = res.data.result.task_duration
        if (res.data.result.task_type === 0) {
          this.reduceTime()
        }
        this.formLoading = false
      })
    }
  },
  methods: {
    submit() {
      if (this.form.task_type === 0) {
        let duration = this.form.task_duration - this.duration
        this.form['duration'] = duration
      } else {
        this.form['duration'] = 0
      }
      this.$http({
        url: this.$settings.BASE_URL + '/paper/student_index/submit_paper/',
        method: 'post',
        data: this.form,
      }).then(res => {
        if (res.data.code === 20000) {
          this.$message({
            type: 'success',
            message: '交卷成功!',
            duration: 5000,
          });
          clearInterval(this.timer)
          this.$router.push('/StudentIndex')
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 5000,
          });
        }
      })
    },
    open() {
      this.$confirm('试卷一旦提交将不能修改,确认提交答卷吗?', '提示', {
        confirmButtonText: '交卷',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.submit()
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消交卷'
        });
      });
    },
    reduceTime() {
      clearInterval(this.timer)
      let sec = 0
      this.timer = setInterval(() => {
        this.format_min = this.duration
        if (this.duration <= 9) {
          this.format_min = `0${this.duration}`
        }
        sec -= 1
        if (sec <= 9) {
          if (sec <= 0) {
            this.format_sec = '00'
            sec = 60
            this.duration -= 1
            if (this.duration < 0) {
              this.submit()
              clearInterval(this.timer)
              this.$notify({
                title: '考试时间已到',
                message: '考试已结束,您的答卷已自动提交,继续答题无效,',
                type: 'warning',
                duration: 20000,
              });
            }
          } else {
            this.format_sec = `0${sec}`
          }
        } else {
          this.format_sec = sec
        }
        this.format_time = `${this.format_min}:${this.format_sec}`
      }, 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  computed: {}
}
</script>

<style lang="css" scoped>
.watch-block {
  color: whitesmoke;
  background-color: rgba(5, 20, 10, 0.5);
  height: 60px;
  width: 60px;
  border-radius: 50%;
  position: fixed;
  right: 20px;
  bottom: 40px;
  text-align: center;
  border: solid mediumseagreen 3px;
}

.back-btn {
  height: 80px;
  margin-top: 20px;
  margin-left: 697px;
}

.align-center {
  text-align: center
}

.exam-question-item {
  padding: 10px;
}

.el-form-item__label {
  font-size: 15px !important;
}


.question-title-padding {
  padding-left: 25px;
  padding-right: 25px;
}

.sec-title {
  margin-right: 50px;
  font-weight: normal;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}

</style>
